<template>
  <j-modal
    class="modalFooter"
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <div class="track-content">
      <div class="probably-content">
        <div class="probably-table-title">
          客户名称:
        </div>
        <div class="probably-table-content">
          {{ customerName }}
        </div>
      </div>
      <div class="probably-content">
        <div class="probably-table-title">
          客户群名称:
        </div>
        <div class="probably-table-content">
          {{ msgGroup }}
        </div>
      </div>
      <div class="probably-content">
        <div class="probably-table-title">
          库房名称:
        </div>
        <div class="probably-table-content">
          {{ storeHouse }}
        </div>
      </div>
      <div class="probably-content">
        <div class="probably-table-title">
          供应商群名称:
        </div>
        <div class="probably-table-content">
          {{ crowdName }}
        </div>
      </div>
      <div class="detail-content">
        <div
          :class="sessionId == item.id ? 'colorred' : ''"
          class="detail-content-list"
          v-for="(item, index) in infoList"
          :key="index"
        >
          <div class="detail-time">
            <div>{{ item.msgtime }}</div>
            <div>{{ item.msgGroup }}</div>
          </div>
          <div class="detail-logistics">
            {{ item.msgText }}
          </div>
        </div>
      </div>
    </div>
    <div class="track-bottom">
      <div class="track-bottom-text">
        <div>供应商回复内容:</div>
        <a-textarea
          v-model="supplierReply"
          style="width: 300px;margin-left: 10px;"
          :autosize="{ minRows: 8, maxRows: 8 }"
          disabled
        ></a-textarea>
      </div>
      <div class="track-bottom-text">
        <div>人工确认回复内容:</div>
        <a-textarea
          v-model="comfirmReply"
          style="width: 300px;margin-left: 10px;"
          :autosize="{ minRows: 8, maxRows: 8 }"
        ></a-textarea>
      </div>
    </div>
    <!-- <a-row>
        <a-col :span="12">
            <div class="track-bottom-text">
              <div>供应商回复内容:</div>
              <a-textarea v-model="supplierReply" style="width: 300px;" :rows="10" allowClear></a-textarea> 
            </div>
        </a-col>
        <a-col :span="12">
            <a-textarea v-model="comfirmReply" placeholder="请输入确认回复内容" :rows="10" allowClear></a-textarea>
        </a-col>
      </a-row> -->
    <!-- <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="供应商回复内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierReply">
            <a-textarea v-model="supplierReply" :rows="10" allowClear></a-textarea>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="确认回复内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comfirmReply">
            <a-textarea v-model="comfirmReply" placeholder="请输入确认回复内容" :rows="10" allowClear></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model> -->
  </j-modal>
</template>

<script>
import { httpAction, getAction, putAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import dayjs from 'dayjs'

export default {
  name: 'peoplejr',
  data() {
    return {
      title: '人工介入',
      width: 1000,
      visible: false,
      confirmLoading: false,
      infoList: [],
      confirmLoading: false,
      customerName: '',
      msgGroup: '',
      id: '',
      storeHouse: '',
      sessionId: '',
      supplierReply: '',
      comfirmReply: '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {},
      crowdName: ''
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    init(r) {
      this.customerName = r.customerName
      this.msgGroup = r.msgGroup
      this.storeHouse = r.storeHouse
      this.sessionId = r.sessionId
      this.supplierReply = r.supplierReply
      this.comfirmReply = r.comfirmReply
      this.id = r.id
      let url = '/wechatSession/wechatSession/manualAccess'
      getAction(url, { id: r.id }).then(res => {
        this.infoList = res
        this.crowdName = this.infoList[0].crowdName
        this.infoList.forEach(item => {
          item.msgtime = dayjs(Number(item.msgtime)).format('YYYY-MM-DD HH:mm:ss')
        })
      })
      this.visible = true
    },
    handleOk() {
      let url = '/tasklsit/tasklsit/edit'
      let data = {
        id: this.id,
        taskState: '人工介入',
        comfirmReply: this.comfirmReply
      }
      putAction(url, data).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.$emit('rengongok')
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.ant-modal-body {
  padding: 15px;
}
.track-content {
  width: 100%;
}
.probably-content {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #f5f5f5;
}
.probably-table-title {
  flex: 1;
  text-align: right;
  padding-right: 15px;
  color: #9b9b9b;
  border-right: 1px solid #f5f5f5;
}
.probably-table-content {
  flex: 8;
  padding-left: 10px;
  color: #000;
}
.detail-content {
  width: 100%;
  height: 400px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fafafa;
  overflow-y: scroll;
}
.detail-content-list {
  display: flex;
  line-height: 26px;
  margin-bottom: 20px;
}

.colorred {
  display: flex;
  line-height: 26px;
  margin-bottom: 20px;
  color: red !important;
}
.detail-time {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.detail-logistics {
  flex: 2;
}
.modalFooter .ant-btn-primary {
  display: none;
}
.track-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.track-bottom-text {
  display: flex;
  flex-direction: row;
  align-items: start;
  width: calc(100% / 2);
}
</style>
